<template>
  <div class="cart">
    <!-- 顶部标题栏 -->
    <top-header :isLeft="true" title="支付"></top-header>
    <!-- 用户信息栏 -->
    <div class="user">
      <ul>
        <p><b>收货信息：</b></p>
        <li v-for="(item, index) in userlist" :key="index">
           <p> <b>地址：</b>{{item.address}}</p>
           <p><b>姓名：</b>{{item.username}} <span><b>手机号：</b>{{item.phone}}</span></p>
        </li>
      </ul>
    </div>
    <!--展示商品信息 -->
    <div>
      <div class="cart_list1" v-for="(item, index) in buylist" :key="index">
        <div class="cart_list">
         <van-swipe-cell>
          <van-card
          :num="item.count"
          :price="item.price/100"
          :desc="item.content"
          :title="item.name"
          :thumb="item.img"
          >
          </van-card>
         </van-swipe-cell> 
        </div>
      </div>
    </div>
    <!-- 底部支付组件 -->
    <buy-foot :buylist="buylist"></buy-foot>
  </div>
</template>

<script>
import BuyFoot from '../components/BuyFoot.vue';
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader, BuyFoot },
  data() {
    return {
        userlist:[],//用户信息
        buylist:[],//购买信息
    };
  },
  computed:{
    
  },
  methods: {
    
  },
  mounted() {
    //代付款商品查询
    this.$http
      .get("/work/box-horse/freshdetail.php", {
        params: {
          id: this.$route.query.id,
        },
      })
      .then((res) => {
          console.log(res);
        this.buylist = res.data.data;
      })
      .catch((err) => {});
    //用户信息查询
    this.$http
      .post("/work/box-horse/userlist.php")
      .then((res) => {
        console.log(res);
        this.userlist=res.data.data;
      })
      .catch((err) => {});
  },
};
</script>
<style lang="scss" scoped>
.cart {
    height:calc(100vh - 160px);
    background-color:#f2f2f2;
    //padding: 50px 0;
}
.van-nav-bar {
    background-color: #FF6347;
}
.van-nav-bar__title {
    color: white;
    font-size: 16px;
}
.van-icon-arrow-left::before {
    color: white;
    font-size: 20px;
}
.van-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 32px;
    font-size: 16px;
    font-weight: bold;
    margin: -8px 0 6px 0px;
}
.van-card__price {
    color: #FF6347;
    font-weight: bold;
}
.delete-button {
    height: 100%;
  }
.cart_list{
    justify-content: space-between;
    justify-items: center;
    width: 100vw;
    background-color: #FAFAFA;
    margin-top: 0.16rem;
    .van-checkbox{
        margin-left: 0.32rem;
    }
    .van-card{
        width: 90vw;
        right: 0;
        padding: 0.16rem 0.32rem 0.16rem 0.06rem;
        margin:0 auto;
    }
  }
.img {
  height: calc(100% - 96px);
  background-color: #f2f2f2;
  img {
    width: 100%;
  }
  div {
    width: 100%;
    height: 3rem;
    background-color: #f2f2f2;
  }
}

.user{
   background-color: #FAFAFA;
   margin-top: 5px;
   p{
     color: #000;
   }
   b{
     color: $starbucks-color;
   }
}
</style>